body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background: #263a4d;
    color: #fff;
}

.wave {
    position: absolute;
    height: 150px;
    width: 500px;
    left: -50px;
    background: #fff;

    .circle {
        position: relative;
        float: left;
        width: 50px;
        height: 50px;
        top: -24px;
        border-radius: 50px;

        &:nth-child(2n + 2) {
            top: -26px;
        }
    }
}

.wave-back {
    top: 225px;
    background: #406384;
    animation: wave-back 4s ease-in-out alternate infinite;

    .circle {
        background: #406384;

        &:nth-child(2n + 2) {
            background: #263a4d;
        }
    }
}
.wave-middle {
    top: 280px;
    background: #5d90bf;
    animation: wave-middle 4s ease-in-out alternate infinite;

    .circle {
        background: #5d90bf;

        &:nth-child(2n + 2) {
            background: #406384;
        }
    }
}
.wave-front {
    top: 335px;
    background: #7eb3e6;
    animation: wave-front 4s ease-in-out alternate infinite;

    .circle {
        background: #7eb3e6;

        &:nth-child(2n + 2) {
            background: #5d90bf;
        }
    }
}

@keyframes wave-back {
    from {
        transform: translate3d(-20px, 0, 0);
    }
    to {
        transform: translate3d(20px, 0, 0);
    }
}
@keyframes wave-middle {
    from {
        transform: translate3d(10px, 0, 0);
    }
    to {
        transform: translate3d(-10px, 0, 0);
    }
}
@keyframes wave-front {
    from {
        transform: translate3d(-50px, 0, 0);
    }
    to {
        transform: translate3d(50px, 0, 0);
    }
}
